﻿<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
		<title>doughnut3D</title>
    
    <script src="jquery-1.10.2.js"></script>
    
    <script type="text/javascript" src="fusioncharts-suite-xt/js/fusioncharts.js"></script>
<script type="text/javascript" src="fusioncharts-suite-xt/js/themes/fusioncharts.theme.fint.js"></script>


</head>
<body>

<script type="text/javascript">
  FusionCharts.ready(function(){
    var revenueChart = new FusionCharts({
        "type": "doughnut3d",
        "renderAt": "chartContainer",
        "width": "651",
        "height": "415",
        "dataFormat": "json",
        "dataSource":  {
    "chart": {
        "caption": "Split of Revenue by Product Categories",
        "subCaption": "Last year",
        "numberPrefix": "$",
        "paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
        "bgColor": "#ffffff",
        "showBorder": "0",
        "use3DLighting": "0",
        "showShadow": "0",
        "enableSmartLabels": "0",
        "startingAngle": "310",
        "showLabels": "0",
        "showPercentValues": "1",
        "showLegend": "1",
        "legendShadow": "0",
        "legendBorderAlpha": "0",
        "decimals": "0",
        "captionFontSize": "14",
        "subcaptionFontSize": "14",
        "subcaptionFontBold": "0",
        "toolTipColor": "#ffffff",
        "toolTipBorderThickness": "0",
        "toolTipBgColor": "#000000",
        "toolTipBgAlpha": "80",
        "toolTipBorderRadius": "2",
        "toolTipPadding": "5",
        "useDataPlotColorForLabels": "1"
    },
    "data": [
        {
            "label": "Food",
            "value": "28504"
        },
        {
            "label": "Apparels",
            "value": "14633"
        },
        {
            "label": "Electronics",
            "value": "10507"
        },
        {
            "label": "Household",
            "value": "4910"
        }
    ]
}

  });
revenueChart.render();

var html = '<div id="overrideLogoDiv" style="width:130px;height:16px;position:absolute;background-color:white;"></div>';
$("body").append(html);
var chartSpan = $("#chartContainer > span");
var chartPos = chartSpan.position();
//alert(chartPos.left+","+chartPos.top+","+chartSpan.height());
$("#overrideLogoDiv").css("left",chartPos.left+5)
$("#overrideLogoDiv").css("top",(chartPos.top+chartSpan.height()-20))
})
</script>
</head>
<body>
	
<div width="800" align="center" style="border: solid 0px; float:center;" id="chartContainer"></div>



</body>
</html>
